<template>
	<div class="scantron" v-if="topicList">
		<div class="" v-for="(item, index) in topicType" :key="index">
			<div class="scantronDiv" v-if="item.count > 0" :class="[groupOpen[index]?'titOpen':'']">
				<div class="scantronTit f16"  @click="openMenu(index)">
					{{ item.name }}
					<span>(共{{ item.count }}道)</span>
					<i class="iconfont icon-jiantou_datika" ></i>
				</div>
				<div class="cardBtns" v-if="groupOpen[index]">
					<div v-for="(num, index2) in item.count" :class="cardList(item.startIndex + num)" :key="num + index2" @click="JumpNum(item, num)">{{ curnumData(item,num)}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'scantron',
	props: {
		CountVO: {
			//题卡
			type: Object,
			required: true
		},
		topicType: {
			type: Array
		},
		topicList: {
			//题目
			type: Array,
			required: true
		},
		topicNumber: {
			//当前题数
			type: Number
		},
		isCorrecting: {
			type: Boolean
		}
	},
	data() {
		return {
			groupOpen: [true,true,true]
		};
	},
	created(){
	},
	methods: {
		openMenu(index){
			this.groupOpen[index]=!this.groupOpen[index];
			this.$forceUpdate();
		},
		cardList(cardIndex) {
			//cardindex
			const classList = ['card'];
			if (this.topicList[cardIndex - 1] === undefined) throw new Error('topicInfo中题目的数量与题目列表数组长度topicList不匹配！');
			const { isCorrect, userChoice } = this.topicList[cardIndex - 1];
			const { topicNumber } = this;
			//背题模式只显示当前选中项
			// if (this.isRecitation) return classList;
			if (userChoice) classList.push('answered');
			if (topicNumber === cardIndex) classList.push('active');
			if (this.isCorrecting&&userChoice) {
				if (isCorrect === true) classList.push('right');
				if (isCorrect === false) classList.push('false');
			}
			return classList;
		},
		curnumData(item,num){
			let curNum = 0;
			if (item.type == 1) {
				curNum = this.topicType[0].count + num;
			} else if (item.type == 2) {
				curNum = this.topicType[0].count + this.topicType[1].count + num;
			} else {
				curNum = num;
			}
			return curNum;
		},
		JumpNum(item, num) {
			//跳转题目
			let curNumDate = 0;
			if (item.type == 1) {
				curNumDate = this.topicType[0].count + num;
			} else if (item.type == 2) {
				curNumDate = this.topicType[0].count + this.topicType[1].count + num;
			} else {
				curNumDate = num;
			}
			// let curNum=this.topicType[item]
			this.$emit('jumpNum', curNumDate);
		}
	}
};
</script>

<style>
.icon-jiantou_datika {
	color: #999;
	font-size: 10px!important;
	transform: scale(0.7);
	float: right;
}
.titOpen .scantronTit, .scantron>div:last-child .scantronTit{
	border-bottom: none;
}
.scantronTit{
	border-bottom: 1px solid rgba(215, 217, 220, .6);
}
.titOpen .iconfont{
	transform: rotate(180deg) scale(0.7);
}
</style>
